<!--
 * @Date: 2022-06-30 14:19:46
 * @LastEditTime: 2022-07-13 17:10:32
-->
<template>
<div class="rc-main" v-if="videoDetail != null">
  <div class="rc-top-img">
    <router-link :to="{path: '/movie/' + videoDetail.id}"><img width="100px" height="140px" :src="poster + videoDetail.id  + '.jpg'" alt="" /></router-link>
  </div>
  <div class="rc-text">
        <div class="rc-videoname">
            <router-link :to="{path: '/movie/' + videoDetail.id}" class="rc-movie-name">{{videoDetail.movie_name}}</router-link>
        </div>
        <div class="rc-introduction">
          <div>导演：{{videoDetail.director}}</div>
          <div>领衔主演：{{videoDetail.act}}</div>
        </div>
        <div class="rc-score">
          <el-rate
            v-model="videoDetail.movie_score"
            disabled
            show-score
            text-color="#ff9900"
            >
          </el-rate>
          <div>有{{videoDetail.want_to_see}}人标记想看</div>
        </div>
  </div>
</div>
</template>

<script>
import { getAverageStar } from '@/helper'
export default {
  props: ['videoDetail'],
  computed: {
    getAverStar: function () {
      // console.log(this.videoDetail)
      return getAverageStar(this.videoDetail.stars)
    }
  },
  data () {
    return {
      poster: this.picbed + '/poster/'
    }
  },
  mounted () {
    console.log(this.videoDetail)
  }
}
</script>

<style>
.rc-main {
  border: none;
  width: 100%;
  height: 140px;
  display: flex;
}
.rc-top-img{
  width: 100px;
  height: 100%;
  cursor: pointer;
}
.rc-text {
  height: 100%;
  width: calc(100% - 120px);
  padding-left: 20px;
  display: flex;
  background-color: white;
  flex-direction: column;
}
.rc-videoname{
  height: 30%;
  max-width: 580px;
  width: 100%;
  /* display: inline-block; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
}
.rc-introduction {
  flex: 1;
  color: #999;
  font-size: 14px;
}
.rc-score{
  display: flex;
  color: #999;
  justify-content: space-between;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
}
</style>
